<template>
  <div>
    <!-- 搜索框 -->
    <div class="seatch">
      <form action="/">
        <van-search
          v-model.trim="keword"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
          @focus="issetch = false"
        />
      </form>
    </div>
    <!-- 搜索,历史 -->
    <div class="main">
      <component
        @update-keywodrds="onSearch"
        :keword="keword"
        :is="chsuggesA"
      />
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import chsugges from './componets/searchsuggestions.vue'
import Histroy from './componets/seatchHistroy.vue'
import ressult from './componets/seatchresult.vue'
export default {
  components: { chsugges, Histroy, ressult },
  data() {
    return {
      keword: '',
      issetch: false
    }
  },
  computed: {
    ...mapState(['historles']),
    chsuggesA() {
      if (this.keword === '') return Histroy //历史
      if (this.issetch) return chsugges //结果
      return ressult //过程
    }
  },
  methods: {
    ...mapMutations(['SET_HISTORLES']),
    onSearch(val) {
      this.keword = val
      let newhistorles = [this.keword, ...this.historles]
      newhistorles = [...new Set(newhistorles)]
      this.SET_HISTORLES(newhistorles)
      this.issetch = true
    },
    onCancel() {
      this.$router.push({ path: '/ ' })
    }
  }
}
</script>

<style scoped lang="less">
:deep(.seatch) {
  .van-search {
    background-color: rgb(50, 150, 250);
  }
  .van-search__action {
    color: #fff;
  }
}
</style>
